<template>
    <div class="selectionCardShell">
        <div class="selectionCardShell_top">
            <div class="selectionCardShell_top_left">
                <img :src="imgUrl" alt="">
                {{ title }}
            </div>
            <div class="selectionCardShell_top_right" v-if="titleRight" @click="titleRightClick">
                <span>全部</span>
                <img src="@/assets/operation/icon_huisejiantou.png" alt="">
            </div>
        </div>
        <slot></slot>
    </div>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue'
const props = defineProps(['title', 'imgUrl', 'titleRight'])
const emit = defineEmits(['onRight'])

const titleRightClick = () => {
    emit('onRight')
}
</script>

<style lang="less" scoped>
.selectionCardShell {
    width: 100%;
    min-height: 120px;
    background: #fff;
    padding: 15px 15px 1px;
    box-sizing: border-box;
    margin-bottom: 15px;

    .selectionCardShell_top {
        padding-bottom: 15px;
        margin-bottom: 15px;
        border-bottom: 1px solid #FAFAFF;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .selectionCardShell_top_left {
            flex: 1;
            min-width: 0;
            font-weight: 500;
            font-size: 16px;
            color: #1A1B1C;
            display: flex;
            align-items: center;

            img {
                width: 20px;
                height: 20px;
                margin-right: 10px;
            }
        }

        .selectionCardShell_top_right {
            display: flex;
            align-items: center;
            font-weight: 400;
            font-size: 14px;
            color: #8492AD;

            img {
                width: 7px;
                height: 12px;
                margin-left: 10px;
            }
        }
    }
}
</style>